function init(){
	$( ".column1" ).sortable({
		connectWith: ".column1,.column2,.column3,.column4",
		handle: ".portlet-header",
		cancel: ".portlet-toggle",
		placeholder: "portlet-placeholder ui-corner-all"
    });
    $( ".column2" ).sortable({
    	connectWith: ".column1,.column2,.column3,.column4",
        handle: ".portlet-header",
        cancel: ".portlet-toggle",
        placeholder: "portlet-placeholder ui-corner-all"
      });
    $( ".column3" ).sortable({
    	connectWith: ".column1,.column2,.column3,.column4",
        handle: ".portlet-header",
        cancel: ".portlet-toggle",
        placeholder: "portlet-placeholder ui-corner-all"
      });
    $( ".column4" ).sortable({
    	connectWith: ".column1,.column2,.column3,.column4",
        handle: ".portlet-header",
        cancel: ".portlet-toggle",
        placeholder: "portlet-placeholder ui-corner-all"
      });
 
    $( ".portlet" )
      .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
      .find( ".portlet-header" )
      .addClass( "ui-widget-header ui-corner-all" )
      .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
 
    $(".portlet-toggle").click(function() {
    	var icon = $( this );
    	icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
    	icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
}
//切换画布
function swithTab(tabId){
	$.ajax({
		  type: 'POST',
		  url: '/page/getSwithTab',
		  data: {tabId:tabId},
		  dataType: 'JSON',
		  success:function(data){
			  //清除掉portletContent内的div
			  $("#portletContent").empty();
			  //添加画布布局
			  var layout = '';
			  if(data != null && data.canvas != null){
				  layout += '<div class="column'+data.canvas.column1+'"></div>';
				  layout += '<div class="column'+data.canvas.column2+'"></div>';
				  layout += '<div class="column'+data.canvas.column3+'"></div>';
				  $("#portletContent").append(layout);
			  }
			  //给画布添加资源
			  if(data != null && data.ress != null){
				  $.each(data.ress,function(index,item){
					  var portlet = portletHtml(item.res.height,item.res.name,item.res.url,item.resId);
					  addPortlet(portlet,item.subColumn);
				  });
			  }
			  init();
			  checkOn(tabId);
		  },
		});
}
//添加上nav选中样式
function checkOn(tabId){
	$("#navTab a").each(function(idx,item){
		if($(item).attr('tabId') == tabId){
			$(item).addClass('on');
		}else{
			$(item).removeClass('on');
		}
	});
}
//添加portlet到指定的列中
function addPortlet(html,colum){
	$("#portletContent").children("div").each(function(idx,item){
		if(idx == colum){
			$(item).append(html);
		}
	});
}
//添加画布弹出框
function addCanvas(){
	layer.open({
	      type: 2,
	      title: '添加画布',
	      shadeClose: true,
	      shade: [0.8, '#393D49'],
	      area: ['400px', '300px'],
	      content: '/page/addLayout',
	      btn: ['确定', '取消'],
	      yes: function(index, layero){
	    	  var body = layer.getChildFrame('body', index);
	    	  var layout = $(body).find("#layout").val();
	    	  var name = $(body).find("#name").val();
	    	  var arr = layout.split(":");
	    	  var params = {name:name,column1:arr[0],column2:arr[1],column3:arr[2]};
	    	  $.post("/page/saveLayout",params,function(data){
	    		  layer.closeAll();
	    		  window.location.href = "/page/index?tabId="+data.id;
	    	  });
    	  },
    	  btn2: function(index, layero){}
	    });
}
//添加资源弹出框
function addCanvasRes(){
	layer.open({
	      type: 2,
	      title: '添加画布资源',
	      shadeClose: true,
	      shade: [0.8, '#393D49'],
	      area: ['400px', '300px'],
	      content: '/page/addLayoutRes',
	      btn: ['确定', '取消'],
	      yes: function(index, layero){
	    	  var body = layer.getChildFrame('body', index);
	    	  var sel = $(body).find("#sel option:selected");
	    	  var portlet = portletHtml($(sel).attr("lheight"),$(sel).attr("lname"),$(sel).attr("lurl"),$(sel).val());
	    	  addPortlet(portlet,0);
	    	  layer.closeAll();
	    	  init();
	  	  },
	  	  btn2: function(index, layero){}
	    });
}
//构造portletHtml方法
function portletHtml(height,name,url,id){
	return portlet = '<div class="portlet" id="'+id+'">'+
	'<div class="portlet-header">'+name+'</div>'+
	'<div class="portlet-content" ><iframe id="if_content" name="if_content" style="height: '+height+'px;" width="100%" scrolling="auto" '+
	'src="'+url+'" frameborder="0" onload="autoHeight(this);"></iframe></div>'+
	'</div>';
}
function autoHeight(obj){
	//$(obj).height=if_content.document.body.scrollHeight
}
//保存画布资源
function saveCanvasRes(){
	//获取画布ID
	var tabId = "";
	$("#navTab a").each(function(index,element){
		if($(element).hasClass("on")){
			tabId = $(element).attr("tabId");
		}
	});
	var arr = new Array();
	//push
	//获取每列中的资源ID
	$("#portletContent").children().each(function(index,em){
		if($(em).children().length > 0){
			$(em).children().each(function(idx,item){
				var params = {canvasId:tabId,resId:$(item).attr("id"),subColumn:index,sort:idx};
				arr.push(params);
			});
		}
	});
	$.post("/page/saveCanvasRes",{json:JSON.stringify(arr)},function(data){
		layer.alert(data.msg, {icon: data.code});
	});
}